import React, {
	Component
} from 'react';

import PropsTypes from 'prop-types';

class TodoItem extends Component {

	constructor(props) {
		super(props);
		this.handleClick = this.handleClick.bind(this);
	}

	shouldComponentUpdate(nextProps, nextStates) {
		if (nextProps.content !== this.props.content) {
			return true;
		} else {
			return false;
		}
	}

	render() {
		// console.log("child render");
		const {
			test,
			content
		} = this.props;
		return (
			<div onClick = {this.handleClick}>
				{test} - {content}
			</div>
		);
	}

	handleClick() {
		// console.log(this);
		const {
			deleteItem,
			index
		} = this.props;
		deleteItem(index);
	}
}

TodoItem.propTypes = {
	test: PropsTypes.string.isRequired,
	content: PropsTypes.oneOfType([PropsTypes.string, PropsTypes.number]),
	deleteItem: PropsTypes.func,
	index: PropsTypes.number
}

TodoItem.defaultProps = {
	test: 'hello'
}

export default TodoItem;